<template>
  <div id="addQuestionnaire">
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <h1 class="con-right-title">
          <i class="fa fa-reply" @click="cancel"></i>
          创建活动
        </h1>
        <!--下部tab-->
        <div class="form-box">
          <el-form
            v-if="activityform && activityrules"
            ref="activityform"
            :model="activityform"
            label-width="80px"
            :rules="activityrules"
          >
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="活动档案" name="first">
                <el-form-item label="活动分类" prop="classify">
                  <el-input
                    v-model="activityform.classify"
                    disabled
                    placeholder="官方征集活动"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动名称" prop="name">
                  <el-input
                    v-model="activityform.name"
                    placeholder="请输入活动名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动描述" prop="description">
                  <el-input
                    v-model="activityform.description"
                    type="textarea"
                    placeholder="请输入活动描述"
                  ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="activityform.remark"
                    type="textarea"
                    placeholder="请输入备注"
                  ></el-input>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="活动展示" name="second">
                <div class="form-box" style="width: 580px; float: left;">
                  <div class="list">
                    <div class="title">
                      <h3 style="margin-left: 6px">
                        活动列表页
                      </h3>
                    </div>
                    <div style="margin: 20px 0 0 20px;">
                      <el-form-item label="展示名称" prop="showName">
                        <el-input
                          v-model.trim="activityform.showName"
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="活动封面" prop="pictureCover">
                        <el-upload
                          class="upload-demo"
                          drag
                          action="https://jsonplaceholder.typicode.com/posts/"
                          multiple
                        >
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                          </div>
                          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="list">
                    <div class="title">
                      <h3 style="margin-left: 6px">
                        活动详情页
                      </h3>
                    </div>
                    <div style="margin: 20px 0 0 20px;">
                      <el-form-item label="添加H5链接" prop="detailUrl">
                        <el-input
                          v-model="activityform.detailUrl"
                          placeholder="请添加链接"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="list">
                    <div class="title">
                      <h3 style="margin-left: 6px">
                        作品展示页
                      </h3>
                    </div>
                    <div style="margin: 20px 0 0 20px;">
                      <el-form-item
                        label="活动说明背景图"
                        label-width="130px !important"
                      >
                        <div class="img-box">
                          <el-image
                            fit="contain"
                            :src="activityform.imgBackUrl"
                          ></el-image>
                        </div>
                      </el-form-item>
                      <el-form-item label="活动说明">
                        <el-input
                          v-model="activityform.remark"
                          type="textarea"
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="list" style="border: none">
                    <div class="title">
                      <h3 style="margin-left: 6px">
                        活动结束详情页
                      </h3>
                    </div>
                    <div style="margin: 20px 0 0 20px;">
                      <el-form-item label="添加H5链接" prop="endUrl">
                        <el-input
                          v-model="activityform.endUrl"
                          placeholder="请添加链接"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div
                  class="show-right"
                  style="margin: 30px 0 0 50px; float:left"
                >
                  <img src="/static/img/tel.jpg" alt="" width="210px" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="活动规则" name="third">
                <div style="margin-left:18px">
                  <el-form-item
                    label="提交作业起止时间"
                    label-width="130px !important"
                  >
                    <el-date-picker
                      v-model="activityform.date"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="2019-01-03 24:00"
                      end-placeholder="2019-03-06 12:00"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    label="奖品评选时间"
                    label-width="130px !important"
                  >
                    <el-date-picker
                      v-model="activityform.date"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="2019-01-03 24:00"
                      end-placeholder="2019-03-06 12:00"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    label="每人提交作品数量"
                    label-width="130px !important"
                  >
                    <el-input
                      v-model="activityform.name"
                      placeholder="10"
                      style="width:200px"
                    ></el-input>
                    <span>份</span>
                  </el-form-item>
                </div>
              </el-tab-pane>
              <el-tab-pane label="预置用户规则" name="fifth">
                <div style="width: 100%; float: left;">
                  <div class="table-conBtn">
                    <el-button
                      type="warning"
                      icon="el-icon-plus"
                      @click="editPrize('add')"
                    >
                      创建编号
                    </el-button>
                  </div>
                  <!-- 表格部分 -->
                  <el-table :data="PrizeData" style="width: 100%">
                    <el-table-column
                      type="index"
                      width="60"
                      align="center"
                      label="序号"
                    >
                      <template slot-scope="scope">
                        {{
                          scope.$index
                            | filterPage(
                              searchParams.pageNum,
                              searchParams.pageSize
                            )
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="编号名称名称"
                      align="center"
                      min-width="150"
                    ></el-table-column>
                    <el-table-column
                      prop="user"
                      label="用户群"
                      align="center"
                      min-width="150"
                    ></el-table-column>
                    <el-table-column
                      prop="num"
                      label="编号描述"
                      align="center"
                      min-width="150"
                    ></el-table-column>
                    <el-table-column
                      label="操作"
                      prop="secondStatus"
                      width="180"
                      align="center"
                      fixed="right"
                    >
                      <template slot-scope="scope">
                        <el-button type="text" @click="addPrize('add')">
                          编辑
                        </el-button>
                        <el-button type="text" @click="deleteReach(scope.row)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="触达设置" name="fourth">
                <div style="width: 100%; float: left;">
                  <div class="table-conBtn">
                    <el-form-item
                      label="是否触达用户"
                      style="margin-bottom:10px!important"
                    >
                      <el-switch
                        v-model="reachValue"
                        active-color="#1dc8a4"
                        inactive-color="#ccc"
                      >
                      </el-switch>
                    </el-form-item>
                    <el-button
                      type="warning"
                      icon="el-icon-plus"
                      @click="addEditRoles('add')"
                    >
                      创建触达
                    </el-button>
                  </div>
                  <!-- 表格部分 -->
                  <el-table
                    v-if="reachValue"
                    :data="ReachData"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      width="60"
                      align="center"
                      label="序号"
                    >
                      <template slot-scope="scope">
                        {{
                          scope.$index
                            | filterPage(
                              searchParams.pageNum,
                              searchParams.pageSize
                            )
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="rules"
                      label="触达规则"
                      align="center"
                      min-width="150"
                    ></el-table-column>
                    <el-table-column
                      prop="issueTime"
                      label="发布时间"
                      align="center"
                      min-width="120"
                    ></el-table-column>
                    <el-table-column
                      prop="way"
                      label="触达渠道"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      label="操作"
                      prop="secondStatus"
                      width="180"
                      align="center"
                      fixed="right"
                    >
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          @click="addEditRoles('edit', scope.row)"
                        >
                          编辑
                        </el-button>
                        <el-button type="text" @click="deleteReach(scope.row)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
            <el-form-item class="el-form-btn">
              <el-button type="success" plain>
                取消
              </el-button>
              <el-button type="success" @click="onSubmit">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 新增/编辑角色dialog -->
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
    ></dialogAddEdit>
    <createAddEdit
      v-if="dialogReachData.isShow"
      :dialog-reach-data="dialogReachData"
    ></createAddEdit>
    <dialogCompiler
      v-if="dialogEditData.isShow"
      :dialog-edit-data="dialogEditData"
    ></dialogCompiler>
  </div>
</template>

<script>
import dialogAddEdit from '@component/behaviorManagement/eventManagement/official/dialogAddEdit' // 新增/编辑
import createAddEdit from '@component/behaviorManagement/eventManagement/official/createAddEdit' // 新增/编辑
import dialogCompiler from '@component/behaviorManagement/eventManagement/official/dialogCompiler' // 新增/编辑
export default {
  name: 'AddQuestionnaire',
  msg: '官方征集活动管理-创建活动',
  components: {
    dialogAddEdit,
    createAddEdit,
    dialogCompiler
  },
  data() {
    return {
      activeName: 'first',
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      activityform: null, // 表单数据
      activityFile: {
        // 活动档案
        classify: '官方征集活动', // 活动分类
        name: '', // 活动名称
        description: '', // 活动描述
        remark: '' // 备注
      },
      activityShow: {
        // 活动展示
        messageValue: true, // 是否发送消息
        showName: '', // 展示名称
        pictureCover: '', // 活动封面
        detailUrl: '', // 详情h5链接
        qShowUrl: '', // 问卷展示h5链接
        imgBackUrl:
          'http://lxz-test.oss-cn-beijing.aliyuncs.com/2019-06-18/6.jpg', // 活动说明背景图
        endUrl: '' // 活动结束详情h5链接
      },
      reachValue: true, // 是否触达用户
      activityrules: null, // 表单验证
      activityFrules: {
        // 活动档案验证
        name: [{ max: 40, message: '长度在40个字符', trigger: 'blur' }],
        description: [
          { max: 300, message: '长度在300个字符', trigger: 'blur' }
        ],
        remark: [{ max: 300, message: '长度在300个字符', trigger: 'blur' }]
      },
      activitySrules: {
        // 活动展示验证
        showName: [
          { max: 40, message: '长度在30个字符', trigger: 'blur' },
          { required: true, message: '请输入展示名称', trigger: 'blur' }
        ],
        // pictureCover: [
        //   { required: true, message: '请上传活动封面', trigger: 'blur' },
        // ],
        detailUrl: [
          { required: true, message: '请添加H5链接', trigger: 'blur' }
        ],
        // qShowUrl: [
        //   { required: true, message: '请添加H5链接', trigger: 'blur' },
        // ],
        endUrl: [{ required: true, message: '请添加H5链接', trigger: 'blur' }]
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      dialogReachData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      dialogEditData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      ReachData: [
        {
          rules: '参与xx活动人群', // 触达规则
          issueTime: '2019-08-04', // 发布时间
          way: '短信触达'
        },
        {
          rules: '参与xx活动人群', // 触达规则
          issueTime: '2019-08-04', // 发布时间
          way: '推送触达'
        },
        {
          rules: '参与xx活动人群', // 触达规则
          issueTime: '2019-08-04', // 发布时间
          way: '短信触达'
        }
      ], // 触达表格数据
      PrizeData: [
        {
          name: '一等奖用户',
          user: '395805049',
          num: '描述编号的相关内容和大概意思'
        },
        {
          name: '二等奖用户',
          user: '395805049',
          num: '描述编号的相关内容和大概意思'
        },
        {
          name: '三等奖用户',
          user: '395805049',
          num: '描述编号的相关内容和大概意思'
        }
      ] // 奖品表格数据
    }
  },
  mounted() {
    this.activityform = this.activityFile
    this.activityrules = this.activityFrules
  },
  methods: {
    // 返回按钮
    cancel() {
      this.$router.go(-1)
    },
    // tab切换
    handleClick(tab) {
      // console.log(tab.name)
      if (tab.name === 'first') {
        // 活动档案
        this.activityform = this.activityFile
        this.activityrules = this.activityFrules
      } else if (tab.name === 'second') {
        // 活动展示
        this.activityform = this.activityShow
        this.activityrules = this.activitySrules
      }
    },
    // 保存
    onSubmit() {},
    // 新增/编辑
    addEditRoles(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.params = params
    },
    // 预置用户规则编辑
    addPrize(type, params = '') {
      this.dialogEditData.isShow = true
      this.dialogEditData.type = type
      this.dialogEditData.params = params
    },
    // 预置用户规则编辑
    editPrize(type, params = '') {
      this.dialogReachData.isShow = true
      this.dialogReachData.type = type
      this.dialogReachData.params = params
    },
    // 删除触达
    deleteReach() {
      this.$confirm('确定删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {})
    },
    // // 创建编号
    // addPrize() {

    // },
    // // 编辑奖品
    // editPrize() {

    // },
    // 删除奖品
    delectPrize() {}
  }
}
</script>
<style lang="less">
#addQuestionnaire {
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }
  .el-tabs {
    margin: 10px 0 50px 0 !important;
  }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }
  .el-tabs__item.is-active {
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
    margin-top: -1px;
  }
  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
  .el-form-item__label {
    width: 100px !important;
  }
  .el-form-item__content {
    margin-left: 100px !important;
    .el-input {
      width: 400px;
    }
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-textarea {
      width: 400px;
      .el-textarea__inner {
        height: 100px;
      }
    }
  }
  .el-form-btn {
    -webkit-box-shadow: 0px 0px 4px 0px #cfd9ee;
    box-shadow: 0px 0px 4px 0px #cfd9ee;
    position: absolute;
    width: 100%;
    bottom: 0%;
    height: 50px;
    margin-bottom: 0;
    .el-form-item__content {
      margin-right: 60px;
      float: right;
      line-height: 50px;
      .el-button {
        padding: 5px 30px;
      }
    }
  }
  #pane-first {
    margin-top: 20px;
  }
  .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 130px;
    border: 1px solid #eee;
    background: #eee;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  #pane-second {
    margin-left: 15px;
    .list {
      border-bottom: 1px solid #f3f4f7;
      margin-top: 15px;
    }
    .title {
      border-left: 3px solid #1dc8a4;
      height: 12px;
      line-height: 12px;
    }
  }
  #pane-third {
    margin: 20px 0 0 20px;
    .el-date-editor {
      .el-range__icon {
        line-height: 25px;
      }
      .el-range-separator {
        line-height: 25px;
      }
    }
  }
  #pane-fifth {
    .el-form-item__label {
      width: auto !important;
    }
  }
}
</style>
